<div *ngIf=isLogin>
    <nav class="navbar navbar-expand-lg navbar-light bg-primary text-white">
        <a class="navbar-brand text-black" href="/">启书网</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active" *ngFor="let c of categorys">
                    <a class="nav-link text-white" routerLink="/detail/{{c}}">{{cts[c]}}
                    </a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>
    <router-outlet></router-outlet>
</div>
<div *ngIf=!isLogin>
    <div class="container login">
        <div class="row">

            <div class="col">
                <h2 class="text-center">用户登陆</h2>
                <form #heroForm="ngForm" (ngSubmit)="onSubmit()">
                    <div class="form-group">
                        <label for="username">姓名</label>
                        <input type="text" class="form-control" id="username" required [(ngModel)]="model.username" name="username" #name="ngModel">
                    </div>
                    <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
                        Name is required
                    </div>
                    <div class="form-group">
                        <label for="alterEgo">密码</label>
                        <input type="password" class="form-control" id="alterEgo" name="password" required [(ngModel)]="model.password">
                    </div>
                    <button type="submit" class="btn btn-success col " [disabled]="!heroForm.form.valid">Submit
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>